<template>
  <div class="Modal" v-show="modal" @click.self="$emit('closeModal')" style="cursor: pointer;">
    <div class="content" style="cursor: default;">
      <div class="login">
        <div id="login" class="modal-content rounded-4 shadow"
             style="box-shadow: 0rem 0rem 1rem 2px rgba(0, 0, 0, 0.15) !important;">

          <div class="modal-header p-5 pb-4 border-bottom-0">
            <h1 class="fw-bold mb-0 fs-2">Sign up</h1>
          </div>


          <div class="modal-body p-5 pt-0">

            <div class="form-floating mb-3">
              <input type="text"
                     v-model="phone"
                     class="form-control rounded-3"
                     id="floatingInput"
                     @input="$emit('update:modelValue', phone)"
                     placeholder="+7(xxx)-xxx-xx-xx"/>
              <label for="floatingInput">Phone number</label>
            </div>

            <div class="form-floating mb-3">
              <input type="text"
                     v-model="props.code"
                     class="form-control rounded-3"
                     id="floatingPassword"
                     placeholder="Password" :disabled="props.codeInput">
              <label for="floatingPassword">Sms code</label>
            </div>

            <div v-if="registr" class="form-floating mb-3">
              <input type="password"
                     v-model="passwordConfirm"
                     class="form-control rounded-3"
                     id="ConfirmPassword"
                     placeholder="Repeat password">
              <label for="floatingPassword">Confirm Password</label>
            </div>

            <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary"
                    @click="$emit('registration')"
                    type="submit"
            >{{ buttonText }}
            </button>
            <small  style="cursor: pointer;">{{ logInText }}</small>
            <br>
            <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>


          </div>

        </div>

        <div class="message">
          <div class="alert alert-danger" v-show="props.exception" role="alert">
            Произошла ошибка
          </div>
          <div class="alert alert-success" v-show="props.success" role="alert">
            {{ props.response }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, defineProps, defineEmits} from "vue";

let registr = ref(false);
let logInText = ref("Registration");
let buttonText = ref("Sign Up");
let password = ref("");
let passwordConfirm = ref("");
let response = ref("123");
let exception = ref(false);
let success = ref(false);

const props = defineProps({
  modal: {
    required: true,
    default: false
  },
  code: {
    required: false,
    default: ""
  },
  codeInput: {
    required: false,
    default: true
  },
  modelValue: {
    type: String
  },
  exception: {

  },
  success: {

  },
  response: {

  }
})

defineEmits(['update:modelValue', 'registration']);

let phone = ref(props.modelValue)


</script>
<style scoped lang="scss">
.Modal {
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;

  .content {
    .login {
      
      #login {
        background: white;
      }
    }
  }
}
</style>